<template>
  <div>
    <div class="shelfbox">



      <div class="bookcase" v-if="s">
        <div class="headtext">
            <div class="title">
            <p>总共 <span>1</span> 本书</p>
            <p>编辑</p>
          </div>
        </div>

        <div class="template">
          <div class="book">
            <div class="img">
              <img :src="s.img" alt="" />
            </div>

            <div class="text">
              <p>{{s.title}}</p>
              <span>{{s.nav}}</span>
              <div class="txtfoot">
                <p><span>2022-9-29 07:04</span>更新</p>
                <div class="con"></div>
              </div>
            </div>
          </div>

          <!-- <div class="book">
            <div class="img">
              <img src="../assets/img/book1.jpg" alt="" />
            </div>

            <div class="text">
              <p>神秘伪先生</p>
              <span>第373章:你有没有被人始乱终弃过？</span>
              <div class="txtfoot">
                <p><span>2022-9-29 07:04</span>更新</p>
                <div class="con">1/373章</div>
              </div>
            </div>
          </div>

          <div class="book">
            <div class="img">
              <img src="../assets/img/book1.jpg" alt="" />
            </div>

            <div class="text">
              <p>神秘伪先生</p>
              <span>第373章:你有没有被人始乱终弃过？</span>
              <div class="txtfoot">
                <p><span>2022-9-29 07:04</span>更新</p>
                <div class="con">1/373章</div>
              </div>
            </div>
          </div> -->
        </div>
      </div>


      <div class="footer" >
        <p class="link">
          <a href="">小说首页</a>
          <span>|</span>
          <a href="https://a.app.qq.com/o/simple.jsp?pkgname=com.kmxs.reader"
            >手机客户端</a
          >
          <span>|</span>
          <a href="#xtopjsinfo" class="go_top">返回顶部</a>
        </p>

        <p class="link">
          <a href="">问题反馈</a>
          <span>|</span>
          <a href="#xtopjsinfo" class="go_top">版权声明</a>
        </p>

        <p class="link">
          <a href="">若发现不良信息,请您告知客服,客服QQ:3284839587</a>
        </p>

        <p class="link">
          <a href="">
            <i> 版权所有 ©km.com All Rights Reserved</i> 沪ICP备16039144号-1</a
          >
        </p>
      </div>
      <!-- {{s}} -->
    
    </div>
  </div>
</template>

<script>
export default {

  computed:{
    s(){
      let a = localStorage.arr
      let obj = JSON.parse(a);
      return obj
      
    }
   
  }
 
};
</script>

<style lang="scss" scoped>
.shelfbox {
  .header {
    height: 58px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-top: 2px;
    background-color: #ffffff;
    padding-left: 14px;
    padding-right: 14px;
    // margin-right: 10px;

    .caption {
      font-size: 20px;
      font-weight: bold;
      color: #000;
    }

    .person {
      width: 20px;
      height: 20px;
      .icon {
        width: 20px;
        height: 20px;
      }
    }

    // .headerbox {
    //   text-align: center;
    //   border-radius: 20px;
    //   padding-left: 14px;
    //   padding-right: 14px;
    //   margin-right: 10px;
    //   &:nth-child(1) {
    //     margin-right: 20px;
    //     background-color: #ffa55b;
    //     a {
    //       color: #ffffff;
    //     }
    //   }
    //   &:nth-child(2) {
    //     background-color: #ffffff;
    //     border: 1px solid #ffa55b;
    //   }
    //   a {
    //     color: #ffae6b;
    //     height: 34px;
    //     line-height: 34px;
    //     font-size: 16px;
    //   }
    // }
  }

  .nav {
    display: flex;
    justify-content: space-around;
    background-color: #ffda33;
    a {
      height: 40px;
      line-height: 40px;
      justify-content: space-around;
      font-size: 18px;
      color: #666666;
      padding: 0 16px;

    }
    // .con{
    //     color: #ff9744;
    //   border-bottom: 2px solid #ff9744;
    // }
    .router-link-active {
      color: #ff9744;
      border-bottom: 2px solid #ff9744;
    }
  }

  .bookcase {
    background-color: #ffffff;
    .headtext {
      padding-top: 10px;
      background-color: #ffffff;
      .title {
        display: flex;
        padding: 0px 20px;
        justify-content: space-between;

        p {
          font-size: 14px;
          color: #000;
          span {
            color: red;
          }
        }
      }
    }

    .template {
      .book {
        align-items: center;
        display: flex;
        padding: 10px 20px;
        .img {
            margin-right: 10px;
          img {
            width: auto;
            height: 80px;
          }
        }

        .text{
            display: flex;
            flex-direction: column;
            p{
                color: #333;
                font-size: 16px;
                font-weight: bold;
            }
            span{
                color: #666666;
                font-size: 14px;
            }

            .txtfoot{
                margin-top: 4px;
                display: flex;
                 justify-content: space-between;
                p{
                    color: #666666;
                    font-size: 14px;
                }

                .con{
                    color: #1abc9c;
                    font-size: 14px;
                }


            }
        }




      }
    }
  }


  .footer {
    margin-top: 34px;
    background-color: #ffffff;
    padding-top: 2px;
    .link {
      display: flex;
      justify-content: center;
      margin: 6px 6px;
      a {
        color: #999999;
        font-size: 14px;
      }
      i {
        color: #999999;
        font-size: 10px;
      }
      span {
        margin: 0 7px;
        color: #999999;
        font-size: 12px;
        list-style: none;
      }
      &:nth-child(4) {
        padding-top: 6px;
        padding-bottom: 14px;
      }
    }
  }
}
</style>